import React, { memo, useState, useMemo } from "react";
import { View, ScrollView } from "@tarojs/components";
import { COLORS } from "@/utils/local-data"
import { formatNumber, formatAmount, formatDate } from "@/utils/fomatter"
import { useSelector, useDispatch } from 'react-redux'
import _ from "loadsh"

import './index.scss'

const ScrollItem = (props) => {
  const dispatch = useDispatch()
  const { scrollLeft, scrollEndLeft } = useSelector(state => state.scrollLeft)
  const { reportDetail } = useSelector(state => state.obsPool)

  const [beginScroll, setBeginScroll] = useState(false)
  const { title, time, keyName, showColor, formatTime = false, showPercent = false, retain = 2 } = props

  const getColor = (value) => {
    if (value > 0) {
      return 'red positive'
    } else if (value < 0) {
      return 'gre negative'
    } else {
      return ''
    }
  }

  const formatData = (value) => {
    if (formatTime) {
      if (typeof value == 'number') {
        return formatDate(value.toString(), 'string', 'YYYY/MM/DD')
      }
      return formatDate(value, 'string', 'YYYY/MM/DD')

    } else {
      if (showPercent) {
        return formatNumber(value * 100, retain) + '%'
      } else {
        return value
      }

    }
  }

  const setScrollLeft = (detail) => {
    if (!beginScroll) return false
    dispatch({
      type: 'scrollLeft/changeScrollLeft',
      payload: { scrollLeft: detail.detail.scrollLeft }
    })


  }
  const setScrollEndLeft = (detail) => {
    dispatch({
      type: 'scrollLeft/changeScrollEndLeft',
      payload: { scrollEndLeft: detail.detail.scrollLeft }
    })


  }
  return (
    <View className='scroll-item'>
      <View className='left gry3'>{title}</View>
      <ScrollView className='scroll-item-body'
        scrollX
        enableFlex
        enhanced
        onScroll={(detail) => setScrollLeft(detail)}
        scrollLeft={beginScroll ? scrollEndLeft : scrollLeft}
        onDragEnd={(e) => setScrollEndLeft(e)}
        onTouchStart={() => setBeginScroll(true)}
        onTouchEnd={() => setBeginScroll(false)}
      >
        <View className='first-column'>
          <View className={showColor ? getColor(reportDetail?.hs300Model[keyName]) : ''}>{formatData(reportDetail?.hs300Model[keyName])}</View>
          <View className={showColor ? getColor(reportDetail?.zz500Model[keyName]) : ''}>{formatData(reportDetail?.zz500Model[keyName])}</View>
        </View>
        {
          reportDetail?.otherList.length ?
            reportDetail?.otherList.map((product, index) => {
              return (
                <View className={`public-column ${showColor ? getColor(product[keyName]) : ''}`} style={{ borderLeft: `2px solid ${COLORS[index % COLORS.length]}` }} key={product.name + index}>
                  <View className='word'>
                    <View> {formatData(product[keyName])}</View>
                    {
                      time ?
                        <View className='down'>{time} 运作起</View>
                        :
                        null
                    }


                  </View>
                </View>
              )
            })
            :
            null
        }



      </ScrollView>
    </View >


  );
};

export default memo(ScrollItem);
